 <template lang="html">
    <div class="overflowx" ref="overflowx">
       <div class="delete-wrap">
            <el-dialog
                title="提示"
                :visible.sync="TaskVisible"
                size="tiny">
                <div >删除该流程，则同时删除该流程下的所有任务。</div>
                <div class="text-style">确认删除？</div>
                <span slot="footer" class="dialog-footer">
                <el-button @click="TaskVisible = false">取 消</el-button>
                <el-button type="primary" @click="deletePro()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="process-con">
            <div v-for="(item, index) in process" class="process" ref="process">
                <h2 class="drag">拖动</h2>
                <h2 v-if="item.newHead" class="new-head">
                    <el-input v-model="item.name" placeholder="请输入内容"></el-input>
                    <el-button @click="buildNewProcess(index)">新建</el-button>
                    <el-button @click="cancelProcess(index)">取消</el-button>
                </h2>
                <h2 v-if="item.head" class="head" @mousedown="dragDown($event, process.length, process)">
                    <span class="left">{{ item.name }}</span>
                    <i class="el-icon-more icon-more" v-if="createEmpId == id"  @click="editPro(index)"></i>
                    <div class="pro-opera" v-show="operaShow" :class="{hide: (operaNum !== index)}">
                        <div @click="editProN(index)"><i class="el-icon-edit"></i><span>编辑流程</span></div>
                        <div @click="clickIcon(index)"><i class="el-icon-delete2"></i><span>删除流程</span></div>
                    </div>
                </h2>
                <h2 v-if="item.editHead" class="edit-head clearfix">
                    <el-input v-model="item.name" placeholder="请输入内容"></el-input>
                    <el-button @click="pushEditProcessName(index)">确定</el-button>
                </h2>
                <ul class="task-list clearfix" ref="taskList">
                    <li v-for="(items, taskIndex) in item.taskList" :class="{ bgc_done: items.isDone }">
                        <div v-if="!items.isCreated" class="new-task-edit clearfix">
                            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" placeholder="任务描述" v-model="items.description"></el-input>
                            <el-select v-model="items.dealPerson" placeholder="处理人">
                                <!-- <el-option-group v-for="group in dealPersonList" :label="group.label">
                                    <el-option v-for="item in group.children" :label="item.label" :value="item">
                                    </el-option>
                                </el-option-group> -->
                                <el-option v-for="person in dealPersonList" :label="person.name" :value="person"></el-option>
                            </el-select>
                            <template>
                                <el-radio-group v-model="items.emergencyLevel">
                                    <el-radio :label="'VERY'" class="c_red">非常紧急</el-radio>
                                    <el-radio :label="'URGENT'" class="c_orange">紧急</el-radio>
                                    <el-radio :label="'COMMON'" class="c_blue">普通</el-radio>
                                </el-radio-group>
                            </template>
                            <el-date-picker type="datetime" placeholder="截止时间" v-model="items.deadLine" format="yyyy-MM-dd HH:mm:00"></el-date-picker>
                            <el-select v-model="items.circleTime" placeholder="选择循环周期" @change="circleChange(items)">
                                <el-option v-for="option in items.circleTimeOption" :label="option.label" :value="option.value"></el-option>
                            </el-select>
                            <el-select v-if="items.circleTime == 'WEEK'" v-model="items.circleChoose" placeholder="请选择">
                                <el-option v-for="item in circleWeek" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-select v-if="items.circleTime == 'MONTH'" v-model="items.circleChoose" placeholder="请选择">
                                <el-option v-for="item in circleMonth" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                            <el-time-select v-if="items.circleTime == 'WEEK' || items.circleTime == 'MONTH'" v-model="items.circleHour" :picker-options="{ start: '09:30', step: '00:30', end: '18:30' }" placeholder="选择时间"></el-time-select>
                            <el-button @click="releaseTask(index, taskIndex)">发布任务</el-button>
                            <el-button @click="cancelRelease(index, taskIndex)">取消</el-button>
                        </div>
                        <div v-if="items.isCreated" class="task-info clearfix" :class="[{ bl_red: items.emergencyLevel == 'VERY' },{  bl_orange: items.emergencyLevel == 'URGENT' },{ bl_blue: items.emergencyLevel == 'COMMON' }]" >
                            <div class="info" @click="reEditTask(index,taskIndex,items)">
                                <h3>{{ items.description }}</h3>
                                <div class="clearfix">
                                    <span class="deal-person">{{ items.dealPerson }}</span>
                                    <span class="deadline">{{ items.deadLine }}</span>
                                </div>
                            </div>
                            <div class="operate">
                                <!-- <el-button @click="reEditTask(index, taskIndex)">编辑</el-button> -->
                                <el-checkbox v-model="items.isDone" @change="taskState(items.id, items.isDone)" 
                                :disabled="createEmpId != id && role != 'ADMIN' && (items.dealPersonId !== id && items.createPersonId !== id)"></el-checkbox>
                            </div>
                        </div>
                    </li>
                    <li v-if="item.isCreated" @click="createNewTask(index)" class="new-task"><img src="../../assets/task/new.png">新建任务</li>
                </ul>
            </div>
            <div @click="addProcess" class="new-process" v-if="role == 'ADMIN' || id == createEmpId"><img src="../../assets/task/new.png">新建流程</div>
        </div>
         <div class="task-edit" v-if="isEditTask">
                <el-card class="box-card ">
                    <div slot="header" class="clearfix">
                        <span>任务</span>
                        <div class="task-reset"> 
                            <i class="el-icon-delete2" @click="deleteTask()"></i>
                            <i class="el-icon-circle-close" @click="isEditTask = false"></i>
                        </div>
                    </div>
                    <div class="task-content">
                        <div><el-checkbox >{{taskContent.description}}</el-checkbox></div>
                        <div>
                            <span>处理人：</span>
                            <el-select v-model="name" >
                                <el-option
                                    v-for="person in dealPersonList"
                                    :label="person.name"
                                    :value="person.name">
                                </el-option>  
                            </el-select>
                        </div>
                        <div>
                            <el-radio-group v-model="taskContent.emergencyLevel">
                                <el-radio :label="'VERY'" class="c_red">非常紧急</el-radio>
                                    <el-radio :label="'URGENT'" class="c_orange">紧急</el-radio>
                                <el-radio :label="'COMMON'" class="c_blue">普通</el-radio>
                            </el-radio-group>
                        </div>
                        <div>
                           <div class="block">
                                <span>截止时间：</span>
                                <el-date-picker
                                  v-model="value1"
                                  type="datetime"
                                  size="large"
                                  placeholder="选择日期时间"
                                  class="input-width">
                                </el-date-picker>
                            </div>
                            <div class="cycle-time">
                                <span>循环周期：</span>
                                <el-select v-model="taskContent.circleTime" placeholder="请选择" class="input-width">
                                    <el-option v-for="option in taskContent.circleTimeOption" :key="option.value" :label="option.label" :value="option.value"></el-option>
                                </el-select>
                                <div class="input-choose">
                                    <el-select v-if="taskContent.circleTime == 'WEEK'" v-model="taskContent.circleChoose" placeholder="请选择">
                                        <el-option v-for="week in circleWeek"  :label="week.label" :value="week.value"></el-option>
                                    </el-select>
                                </div>
                                <div class="input-choose">
                                    <el-select v-if="taskContent.circleTime == 'MONTH'" v-model="taskContent.circleChoose" placeholder="请选择">
                                        <el-option v-for="month in circleMonth" :label="month.label" :value="month.value"></el-option>
                                    </el-select>
                                </div>
                                <div class="input-choose">
                                    <el-time-select v-if="taskContent.circleTime == 'WEEK' || taskContent.circleTime == 'MONTH'" v-model="taskContent.circleHour" :picker-options="{ start: '09:30', step: '00:30', end: '18:30' }" placeholder="选择时间"></el-time-select>
                                </div>
                            </div>
                            <div  class="save-btn">
                                <el-button type="success" size="large" @click="reReleaseTask()">保存</el-button>
                            </div>  
                        </div>
                    </div>
                </el-card>
            </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            process: [],
            dealPersonList: [],
            dragPutData: [],
            ifNewTask: true,
            id: localStorage.getItem('ID'),
            createEmpId: localStorage.getItem('createEmpId'),
            role: localStorage.getItem('ROLE'),
            operaNum:'',
            operaShow: false,
            isShow: false,
            TaskVisible: false,
            isEditTask: false,
            proIndex: '',
            radio: '1',
            value1:'',
            taskContent:'',
            name :'',
            processIndex :'',
            taskIndex:'',
            circleWeek: [{
                value: '1',
                label: '星期一'
            }, {
                value: '2',
                label: '星期二'
            }, {
                value: '3',
                label: '星期三'
            }, {
                value: '4',
                label: '星期四'
            }, {
                value: '5',
                label: '星期五'
            }, {
                value: '6',
                label: '星期六'
            }, {
                value: '7',
                label: '星期日'
            }],
            circleMonth: [{
                value: '1',
                label: '1日'
            }, {
                value: '2',
                label: '2日'
            }, {
                value: '3',
                label: '3日'
            }, {
                value: '4',
                label: '4日'
            }, {
                value: '5',
                label: '5日'
            }, {
                value: '6',
                label: '6日'
            }, {
                value: '7',
                label: '7日'
            }, {
                value: '8',
                label: '8日'
            }, {
                value: '9',
                label: '9日'
            }, {
                value: '10',
                label: '10日'
            }, {
                value: '11',
                label: '11日'
            }, {
                value: '12',
                label: '12日'
            }, {
                value: '13',
                label: '13日'
            }, {
                value: '14',
                label: '14日'
            }, {
                value: '15',
                label: '15日'
            }, {
                value: '16',
                label: '16日'
            }, {
                value: '17',
                label: '17日'
            }, {
                value: '18',
                label: '18日'
            }, {
                value: '19',
                label: '19日'
            }, {
                value: '20',
                label: '20日'
            }, {
                value: '21',
                label: '21日'
            }, {
                value: '22',
                label: '22日'
            }, {
                value: '23',
                label: '23日'
            }, {
                value: '24',
                label: '24日'
            }, {
                value: '25',
                label: '25日'
            }, {
                value: '26',
                label: '26日'
            }, {
                value: '27',
                label: '27日'
            }, {
                value: '28',
                label: '28日'
            }, {
                value: '29',
                label: '29日'
            }, {
                value: '30',
                label: '30日'
            }]
        }
    },
    methods: {
        // 拖拽
        dragDown(event, length, arr) {
            event.preventDefault();
            const processWidth = parseInt(getComputedStyle(this.$refs.process[1]).width);
            const processMarginLeft = parseInt(getComputedStyle(this.$refs.process[1]).marginLeft);
            const scrollLeft = this.$refs.overflowx.scrollLeft;
            var downIndex = '';
            for (var i = 0; i < length; i++) {
                if (scrollLeft + event.pageX > (i * processWidth + (i + 1) * processMarginLeft)) {
                    downIndex = i;
                }
            }
            document.onmouseup = (event) => {
                var upIndex = '';
                
                for (var n = 0; n < length; n++) {
                    if (scrollLeft + event.pageX > (n * processWidth + (n + 1) * processMarginLeft)) {
                        upIndex = n;
                    }
                };
                if (upIndex - downIndex == 1 || upIndex - downIndex == -1) {
                    this.dragPutData.push(
                        {
                            "id": arr[downIndex].id,
                            "sort": upIndex
                        },
                        {
                            "id": arr[upIndex].id,
                            "sort": downIndex
                        }
                    );
                } else if (upIndex < downIndex) {
                    this.dragPutData.push(
                        {
                            "id": arr[downIndex].id,
                            "sort": upIndex
                        }
                    );
                    for (let m = 0; m < downIndex - upIndex; m++) {
                        this.dragPutData.push(
                            {
                                "id": arr[upIndex + m].id,
                                "sort": upIndex + m + 1
                            }
                        )
                    }
                } else if (upIndex > downIndex) {
                    this.dragPutData.push(
                        {
                            "id": arr[downIndex].id,
                            "sort": upIndex
                        }
                    );
                    for (let m = 0; m < upIndex - downIndex; m++) {
                        this.dragPutData.push(
                            {
                                "id": arr[upIndex - m].id,
                                "sort": upIndex - m - 1
                            }
                        )
                    }
                }
                this.$http
                    .put(
                    this.h + '/projects/' + localStorage.getItem('projectId') + '/projFlows',
                    {
                        "data": this.dragPutData
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }
                    ).then((res) => {
                        if (res.data.code == '500') {
                            this.$alert(res.data.msg, '提示', {
                                type: 'error'
                            })
                        } else {
                            const dragProcess = arr[downIndex];
                            if (downIndex !== upIndex) {
                                arr.splice(downIndex, 1);
                                arr.splice(upIndex, 0, dragProcess);
                            }
                        }
                        event.preventDefault();
                        document.onmousemove = null;
                        document.onmouseup = null;
                    })
            };
        },
        // 新建一个流程
        addProcess() {
            this.process.push(
                {
                    newHead: true,
                    head: false,
                    editHead: false,
                    isCreated: false,
                    taskList: [],
                    id: '',
                    sort: ''
                }
            );
        },
        // 确定新建流程
        buildNewProcess(index) {
            const thisProcess = this.process[index];
            if (thisProcess.name) {
                this.$http
                    .post(
                    this.h + '/projFlows',
                    {
                        "name": thisProcess.name,
                        "sort": index + 1,
                        "projId": localStorage.getItem('projectId'),
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }
                    )
                    .then((res) => {
                        console.log(res);
                        thisProcess.head = !thisProcess.head;
                        thisProcess.newHead = !thisProcess.newHead;
                        thisProcess.isCreated = true;
                        thisProcess.id = res.data.data.id;
                        thisProcess.sort = res.data.data.sort;
                    })
            } else {
                this.$message({
                    type: 'warning',
                    message: '内容不能为空!'
                });
            }
        },
        // 取消新建流程
        cancelProcess(index) {
            this.process.splice(index, 1);
        },

        // 编辑流程
        editPro(index) {
            this.operaNum = index;
            this.operaShow = !this.operaShow;
            this.isShow = (this.operaNum == index) ? true: false;
        },
        // 流程名称修改
        editProN(index) {
            console.log(index)
            const thisProcess = this.process[index];
            this.operaShow = false;
            if (thisProcess.name) {
                thisProcess.editHead = !thisProcess.editHead;
                thisProcess.head = !thisProcess.head;
            } else {
                this.$message({
                    type: 'warning',
                    message: '内容不能为空!'
                });
            }
        },
        clickIcon(index) {
            this.TaskVisible = true;
            console.log(index);
            this.proIndex = index;
            this.operaShow = false;
        },
        // 删除流程
        deletePro() {
            this.TaskVisible = false;
            this.operaShow = false;
            console.log(this.proIndex) 
            this.$http.delete (
                this.h +　'/projFlows/' + this.process[this.proIndex].id + '/projects/' + localStorage.getItem('projectId'),
                {
                     headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                 }).then((res) => {
                    console.log(res)
                 }).catch((err) => {
                    console.log("项目流程删除错误")
                 })
            this.process.splice(this.proIndex, 1);
        },
        // 提交流程名称修改
        pushEditProcessName(index) {
            const thisProcess = this.process[index];
            if (thisProcess.name) {
                this.$http
                    .put(
                    this.h + '/projects/' + localStorage.getItem('projectId') + '/projFlows/' + this.process[index].id,
                    {
                        "name": thisProcess.name,
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }
                    )
                    .then((res) => {
                        
                    })
                thisProcess.editHead = !thisProcess.editHead;
                thisProcess.head = !thisProcess.head;
            } else {
                this.$message({
                    type: 'warning',
                    message: '内容不能为空!'
                });
            }
        },
        // 新建任务
        createNewTask(index) {
            console.log(index)
            if (this.ifNewTask) {
                this.ifNewTask = false;
                this.process[index].taskList.push(
                    {
                        description: '',
                        dealPerson: '',
                        emergencyLevel: '',
                        deadLine: '',
                        circleTime: '',
                        circleTimeOption: [
                            {
                                value: 'NONE',
                                label: '不循环'
                            }, {
                                value: 'DAY',
                                label: '每日循环'
                            }, {
                                value: 'WEEK',
                                label: '每周循环'
                            }, {
                                value: 'MONTH',
                                label: '每月循环'
                            }
                        ],
                        isCreated: false,
                        isDone: '',
                        id: '',
                        circleChoose: '',
                        circleHour: '',
                    }
                )
            }
            var delay = setTimeout(() => {
                clearTimeout(delay);
                this.$refs.process[index].scrollTop = 1000000;
            }, )
        },
        // 循环周期修改后的数据重置
        circleChange(items) {
            items.circleChoose = '';
            items.circleHour = '';
        },
        // 发布任务
        releaseTask(index, taskIndex) {
            const thisTask = this.process[index].taskList[taskIndex];
            const thisTaskId = this.process[index].id;
            if (thisTask.description && thisTask.dealPerson && thisTask.emergencyLevel && thisTask.deadLine && thisTask.circleTime) {
                if (thisTask.circleTime == 'NONE' || thisTask.circleTime == 'DAY') {
                    console.log('cycleTime :' +thisTask.circleTime)
                    this.$http
                    .post(
                    this.h + '/tasks',
                    {
                        "name": localStorage.getItem('projectName'),
                        "projId": localStorage.getItem('projectId'),
                        "projFlowId": thisTaskId,
                        "type": thisTask.emergencyLevel,
                        "cycleTime": thisTask.circleTime,
                        "cycleTaskEnd": "",
                        "description": thisTask.description,
                        "execEmpId": thisTask.dealPerson.id,
                        "execEmpName": thisTask.dealPerson.name,
                        "lastEndTime": thisTask.deadLine
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    })
                    .then((res) => {
                        console.log(res);
                        this.ifNewTask = true;
                        var a = res.data.data.lastEndTime.split('-');
                        var b = a[2].split(':');
                        var c = b[0].split(' ');
                        res.data.data.lastEndTime = a[1] + '-' + c[0] + ' ' + c[1] + ':' + b[1];
                        thisTask.deadLine = res.data.data.lastEndTime;
                        thisTask.dealPerson = thisTask.dealPerson.name;
                        thisTask.isCreated = true;
                        thisTask.dealPersonId = res.data.data.execEmpId;
                        thisTask.createPersonId = res.data.data.createEmpId;
                        thisTask.id = res.data.data.id;
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                } else if (thisTask.circleHour && thisTask.circleChoose) {

                    let langArr = thisTask.circleHour.split(':');
                    let lang = (thisTask.circleChoose -1) * 86400000 + langArr[0] * 3600000 + langArr[1] * 60000;
                    console.log(thisTask)
                    console.log(thisTask.deadLine,thisTask.dealPerson.name,thisTask.dealPerson.id,thisTask.description,lang,thisTask.circleTime,thisTask.emergencyLevel,thisTaskId,localStorage.getItem('projectId'),localStorage.getItem('projectName'))
                    this.$http.post(
                    this.h + '/tasks',
                    {
                        "name": localStorage.getItem('projectName'),
                        "projId": localStorage.getItem('projectId'),
                        "projFlowId": thisTaskId,
                        "type": thisTask.emergencyLevel,
                        "cycleTime": thisTask.circleTime,
                        "cycleTaskEnd": lang,
                        "description": thisTask.description,
                        "execEmpId": thisTask.dealPerson.id,
                        "execEmpName": thisTask.dealPerson.name,
                        "lastEndTime": thisTask.deadLine
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    })
                    .then((res) => {
                        console.log(res)
                        var a = res.data.data.lastEndTime.split('-');
                        var b = a[2].split(':');
                        var c = b[0].split(' ');
                        res.data.data.lastEndTime = a[1] + '-' + c[0] + ' ' + c[1] + ':' + b[1];
                        this.ifNewTask = true;
                        thisTask.deadLine = res.data.data.lastEndTime;
                        thisTask.dealPerson = thisTask.dealPerson.name;
                        thisTask.isCreated = true;
                        thisTask.dealPersonId = res.data.data.execEmpId;
                        thisTask.createPersonId = res.data.data.createEmpId;
                    })
                    .catch((err) => {
                        console.log(err);
                    })
                } else {
                    this.$message({
                        type: 'warning',
                        message: '内容不能为空!'
                    });
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '内容不能为空!'
                });
            }
        },
        // 重新编辑任务
        reEditTask(index, taskIndex,items) {
            const thisTask = this.process[index].taskList[taskIndex]
            console.log(thisTask.createPersonId)
            console.log(thisTask.createPersonId,localStorage.getItem('ID'))
            this.isEditTask = thisTask.createPersonId === localStorage.getItem('ID') ? true : false;
            console.log( this.isEditTask)
            console.log(thisTask)
            let myDate = new Date();
            this.taskContent  = thisTask;
            this.processIndex = index;
            this.taskIndex = taskIndex;
            this.taskContent.taskId = items.id;
            this.name = items.dealPerson;
            console.log(this.taskContent);
            
            this.value1 =  myDate.getFullYear() + "-" + this.taskContent.deadLine;
            console.log(this.value1)
           
            
            
        },
        // 修改后重新上传任务
        reReleaseTask() {
            console.log(this.taskContent)
            
            this.$http.patch(
                    this.h + '/projFlows/tasks/' + this.taskContent.taskId,
                    {
                        "createEmpId" : this.taskContent.createPersonId,
                        "createTime" : "",
                        "cycleTime": this.taskContent.circleTime,
                        "description":this.taskContent.description,
                        "execEmpId":this.taskContent.dealPersonId,
                        "lastEndTime":'',
                        "name":this.taskContent.dealPerson,
                        "type":this.taskContent.emergencyLevel
                    },
                    {
                        headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                    }).then((res) => {
                        console.log(res);
                        this.result = res.data.data;
                        this.isEditTask = false;
                    }).catch((err) => {
                        console.log('任务修改接口未完成！');
                    });

        },
        // 删除任务
        deleteTask() {
            console.log("delete");
            console.log(this.taskContent.taskId)
            this.$http.delete(
                this.h + '/tasks/' +　this.taskContent.taskId,
                {
                    headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                }).then((res)=> {
                    console.log(res)
                    this.isEditTask = false;
                }).catch((err) => {
                    console.log("任务删除接口未完成！")
                })
            this.process[this.processIndex].taskList.splice(this.taskIndex, 1);
        },
        // 取消新建任务
        cancelRelease(index, taskIndex) {
            this.ifNewTask = true;
            this.process[index].taskList.splice(taskIndex, 1);

        },
        // 任务状态变更
        taskState(id, state) {
            var patchState = '';
            if (state) {
                patchState = '1'
            } else {
                patchState = '0'
            }
            this.$http
                .patch(
                this.h + '/tasks/' + id,
                {
                    "comState": patchState,
                    "comEndTime": ""
                },
                {
                    headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                }
                ).then((res) => {
                    console.log(res);
                }).catch((err) => {
                    state = !state;
                })
        }
    },
    created() {
        // console.log(localStorage.getItem('TOKEN'));
        // console.log(localStorage.getItem('projectId'));
        // console.log(localStorage.getItem('ID'));
        // console.log(localStorage.getItem('createEmpId'));
        /*
         * 页面创建时：
         * 1. 获取流程列表
         * 2. 获取流程中的任务列表
         * 3. 获取任务中的处理人列表
         */
        // console.log(this.$route.query.name);
        // console.log(localStorage.getItem('projectId'));
        // console.log(localStorage.getItem('projectName'));
        // 获取流程列表
        console.log(this.createEmpId,this.id)
        this.$http
            .get(
            this.h + '/projects/' + this.$route.query.id + '/projFlows',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }
            ).then((res) => {
                console.log(res);
                const processInfo = res.data.data;
                for (var i = 0; i < processInfo.length; i++) {
                    this.process.push(
                        {
                            newHead: false,
                            head: true,
                            editHead: false,
                            isCreated: true,
                            taskList: [],
                        }
                    );
                    const thisProcess = this.process[i];
                    this.process[i].name = processInfo[i].name;
                    this.process[i].id = processInfo[i].id;
                    // 获取流程中的任务
                    this.$http
                        .get(
                        this.h + '/projects/'
                        + localStorage.getItem('projectId')
                        + '/projFlows/'
                        + processInfo[i].id
                        // + '/employees/'
                        // + localStorage.getItem('ID')
                        + '/tasks',
                        {
                            headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
                        })
                        .then((res) => {
                            // console.log(res.data.data);
                            const taskInfo = res.data.data;
                            // console.log(taskInfo);
                            // console.log(thisProcess);
                            for (var n = 0; n < taskInfo.length; n++) {
                                if (taskInfo[n].comState == '1') {
                                    taskInfo[n].comState = true;
                                } else if (taskInfo[n].comState == '0') {
                                    taskInfo[n].comState = false;
                                }
                                var a = res.data.data[n].lastEndTime.split('-');
                                var b = a[2].split(':');
                                var c = b[0].split(' ');
                                res.data.data[n].lastEndTime = a[1] + '-' + c[0] + ' ' + c[1] + ':' + b[1];
                                thisProcess.taskList.push(
                                    {
                                        description: taskInfo[n].description,
                                        dealPerson: taskInfo[n].execEmpName,
                                        emergencyLevel: taskInfo[n].type,
                                        deadLine: taskInfo[n].lastEndTime,
                                        circleTime: taskInfo[n].cycleTime,
                                        circleTimeOption: [
                                            {
                                                value: 'NONE',
                                                label: '不循环'
                                            }, {
                                                value: 'DAY',
                                                label: '每日循环'
                                            }, {
                                                value: 'WEEK',
                                                label: '每周循环'
                                            }, {
                                                value: 'MONTH',
                                                label: '每月循环'
                                            }
                                        ],
                                        isCreated: true,
                                        isDone: taskInfo[n].comState,
                                        id: taskInfo[n].id,
                                        dealPersonId: taskInfo[n].execEmpId,
                                        createPersonId: taskInfo[n].createEmpId
                                    }
                                )
                            }
                        })
                }
            }).catch((err) => {
                console.log(err);
                console.log('报错了！');
            })
        // 获取处理人列表
        this.$http
            .get(
            this.h + '/projects/' + localStorage.getItem('projectId') + '/employees',
            {
                headers: { 'Xwt-Request-Token': localStorage.getItem('TOKEN') }
            }
            ).then((res) => {
                // console.log(res.data.data);
                this.dealPersonList = res.data.data;
            })
    }
}

</script>

<style lang="scss">
.operate {
    position: absolute;
    right:10px;
}
.overflowx {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 128px;
    margin-top: 34px;
    padding: 0 4%;
}

.process-con {
    height: 100%;
    position: relative;
}

.new-process {
    vertical-align: top;
    display: inline-block;
    width: 390px;
    line-height: 36px;
    margin-left: 40px;
    padding: 10px;
    background: #f2f2f2;
    border-radius: 3px;
    img {
        margin-right: 15px;
        vertical-align: middle;
    }
}
.input-choose {
    margin-left: 85px;
    margin-top: 10px;
}
.process:first-child {
    margin-left: 0;
}

.process {
    width: 390px;
	border: 1px solid #e7e9f4;
    vertical-align: top;
    display: inline-block;
    padding-bottom: 10px;
    margin-left: 40px;
    background: #fff;
    border-radius: 5px;
    overflow-y: auto;
    height: calc(100% - 60px);
    .head {
		background: #f7f8fc;
        padding-left: 34px;
		line-height: 48px;
		font-size: 16px;
		font-weight: bold;
		border-bottom: 1px solid #e7e9f4;
        position: relative;
        height: 49px;
        img {
            vertical-align: middle;
        }
        .edit {
            float: right;
            margin-top: 6px;
            margin-right: 6px;
        }
    }
    .drag {
        text-align: center;
        padding: 10px;
        background: #ccc;
    }
    .new-head {
        padding: 10px;
        .el-input {
            float: left;
            width: 60%;
        }
        .el-button {
            float: left;
            margin-left: 10px;
        }
    }
    .edit-head {
        padding: 6px;
        border-bottom: 1px solid #e7e9f4;
        background: #f7f8fc;
        .el-input {
            float: left;
            width: 80%;
        }
        .el-button {
            float: right;
        }
    }
    .task-list {
        white-space: normal;
        li.bgc_done {
            background: #e7e9f4;
        }
        li.bgc_fff {
            background: #fff;
        }
        li {
			border-bottom: 1px solid #e7e9f4;
			padding: 7px 15px 7px 10px;
            transition: .5s;
            position: relative;
            .bl_red {
                border-left: 4px solid #fa6e60;
            }
            .bl_orange {
                border-left: 4px solid #49cef6;
            }
            .bl_blue {
                border-left: 4px solid #00c583;
            }
            .new-task-edit {
                padding: 10px;
                background: #fff;
                .el-input {
                    width: 100%;
                    margin-top: 10px;
                }
                .el-radio-group {
                    margin-top: 10px;
                    .c_red {
                        color: #fa6e60;
                    }
                    .c_blue {
                        color: #00c583;
                    }
                    .c_orange {
                        color: #49cef6;
                    }
                }
                .el-select {
                    width: 100%;
                }
                .el-button {
                    width: 48%;
                    float: left;
                    margin-top: 10px;
                }
                .el-button+.el-button {
                    margin-left: 4%;
                }
            }
        }
		li:last-child {
			border-bottom: 0;
		}
        .new-task {
            font-size: 16px;
            line-height: 70px;
            background: #f7f8fc;
            padding: 0 0 0 34px;
            img {
                vertical-align: middle;
                margin-right: 15px;
            }
        }
        .task-info {
			padding: 15px 0 15px 20px;
            .info {
                float: left;
                width: 100%;
                padding-right: 40px;
                margin-right: -40px;
				font-size: 14px;
				h3 {
					font-size: 16px;
				}
                div {
                    margin-top: 10px;
                }
                span {
                    float: left;
                }
                .deal-person {
                    color: #bfc1c9;
                    margin-right: 30px;
                }
				.deadline {
					color: #cececf;
				}
            }
            .operate {
                float: right;
            }
        }
    }
}
.icon-more {
    float: right;
    margin: 15px 10px 0;
    vertical-align: middle;
}
.pro-opera {
    display: inline-block;
    position: absolute;
    top: 36px;
    right: 0px;
    padding: 5px 10px;
    background: #fff;
    z-index: 10;
    border: 1px solid #ccc;
    line-height: 20px;
    font-weight: normal;
    z-index: 10;
}
.pro-opera>div {
    font-size: 12px;
    height: 18px;
    cursor: pointer;
    margin: 5px 0;
}
.pro-opera>div i {
    margin-right: 6px;
    font-size: 12px;
}
.show {
    display: block;
}
.hide {
    display: none;
}
.text-style {
     margin-top: 5px;
}
.box-card {
    height: 100%;
}
.task-edit {
    position: fixed;
    top: 0px;
    right: 0;
    width: 400px;
    height: 90%;
    margin-top: 68px;
    z-index: 10;
}
.task-reset {
    float: right; 
    cursor: pointer; 
}
.task-content>div {
    padding: 40px 0 5px;
    border-bottom: 1px solid #ccc;
}
.el-date-editor .input-width {
    width: 230px;
}
.cycle-time {
    margin-top: 20px;
}
.save-btn {
    text-align: center;
    margin-top: 50px ;
}
.save-btn button {
    width: 150px;
}
.task-content>div:nth-child(1) {
    padding-top: 10px;
}
.task-content>div:nth-child(4) {
    border: 0;
}
</style>
 